<template>
	<view>
		<view class="inv-h-w">
			<view :class="['inv-h',index==0?'inv-h-se':'']" @click="index=0">全部</view>
			<view :class="['inv-h',index==1?'inv-h-se':'']" @click="index=1">进行中</view>
			<view :class="['inv-h',index==2?'inv-h-se':'']" @click="index=2">已完成</view>
			<view :class="['inv-h',index==4?'inv-h-se':'']" @click="index=4">待到达</view>
			<view :class="['inv-h',index==3?'inv-h-se':'']" @click="index=3">待付款</view>
			<!-- <view :class="['inv-h',index==5?'inv-h-se':'']" @click="index=5">售后</view> -->
		</view>
		<!-- 全部订单 -->
		<view class="eveyrOrder" v-show="index == 0">
			<!-- 数据存在的情况 -->
			<view v-if="dataList.length != 0 ">
				<view class="orderMsg" v-if="dataList.length != 0 " v-for="(item,index) in dataList" :key="index">
					<!-- 头像 -->
					<view class="avatarBox">
						<image class="userImage" :src="IMG_URL + item.link" mode="aspectFill"></image>
					</view>
					<!-- 信息 -->
					<view class="userData">
						<view style="font-size: 40rpx;">{{item.gamerName}}</view>
						<view style="font-size: 25rpx;">时长剩余: {{item.totalTime}}小时</view>
						<view style="font-size: 25rpx;">金额: {{item.totalFee}}币</view>
						<view class="bt-dd">
							<view>
								<button size="mini" style="width: 180rpx;height: 65rpx; font-size: 25rpx;line-height: 65rpx; justify-content: right;"  @click="getgammer(item)">查看订单</button>
							</view>
						</view>
					</view>
				</view>
				<!-- <view style="margin: 50rpx 0 200rpx 0;display: flex; align-items: center;justify-content: center;">
					<u-loadmore :status="status" v-show="loadmore" />
				</view> -->
			</view>
			<!-- 无订单数据页面布局 -->
				<view v-if="dataList.length == 0" class="no-order" :style="'height:'+clentHeight+'px;'">
					<view class="no-order-text">
						您还没有相关订单
					</view>
					<u-button type="primary" @click="getToUni">去首页逛逛</u-button>
				</view>
		</view>
		<!-- 进行中 -->
		<view class="eveyrOrder" v-show="index == 1">
			<view v-if="dataList.length != 0">
				<!-- 数据存在的情况 -->
				<view class="orderMsg" v-for="(item,index) in dataList" :key="index">
					<!-- 头像 -->
					<view class="avatarBox">
						<image class="userImage" :src="IMG_URL + item.link" mode="aspectFill"></image>
					</view>
					<!-- 信息 -->
					<view class="userData">
						<view style="font-size: 40rpx;">{{item.gamerName}}</view>
						<view style="font-size: 25rpx;">时长剩余: {{item.totalTime}}小时</view>
						<view style="font-size: 25rpx;">金额: {{item.totalFee}}币</view>
						<view class="bt-dd">
							<view>
								<button size="mini" style="width: 180rpx;height: 65rpx; font-size: 25rpx;line-height: 65rpx; justify-content: right;"  @click="getgammer(item)">查看订单</button>
							</view>
						</view>
					</view>
				</view>
				<!-- <view style="margin: 50rpx 0 200rpx 0;display: flex; align-items: center;justify-content: center;">
					<u-loadmore :status="status" />
				</view> -->
			</view>
				<!-- 无订单数据页面布局 -->
					<view v-if="dataList.length == 0" class="no-order" :style="'height:'+clentHeight+'px;'">
						<view class="no-order-text">
							您还没有相关订单
						</view>
						<u-button type="primary" @click="getToUni">去首页逛逛</u-button>
					</view>
		</view>
		<!-- 已完成 -->
		<view class="eveyrOrder" v-show="index == 2">
				<view  v-if="dataList.length != 0">
					<!-- 数据存在的情况 -->
					<view class="orderMsg" v-for="(item,index) in dataList " :key="index">
						<!-- 头像 -->
						<view class="avatarBox">
							<image class="userImage" :src="IMG_URL + item.link" mode="aspectFill"></image>
						</view>
						<!-- 信息 -->
						<view class="userData">
							<view style="font-size: 40rpx;">{{item.gamerName}}</view>
							<view style="font-size: 25rpx;">时长剩余: {{item.totalTime}}小时</view>
							<view style="font-size: 25rpx;">金额: {{item.totalFee}}币</view>
							<view class="bt-dd">
							<!-- 	<view>
									<button style="width: 170rpx;height: 65rpx; font-size: 25rpx;line-height: 65rpx;margin-right: 20rpx;" @click="delOrderStatus(item.id)">删除订单</button>
								</view> -->
								<view>
									<button size="mini" style="width: 180rpx;height: 65rpx; font-size: 25rpx;line-height: 65rpx; justify-content: right;" @click="getgammer(item)">查看订单</button>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 无订单数据页面布局 -->
					<view v-if="dataList.length == 0" class="no-order" :style="'height:'+clentHeight+'px;'">
						<view class="no-order-text">
							您还没有相关订单
						</view>
						<u-button type="primary" @click="getToUni">去首页逛逛</u-button>
					</view>
				</view>
		<!-- 待付款 -->
		<view class="eveyrOrder" v-show="index == 3">
				<!-- 数据存在的情况 -->
				<view class="orderMsg" v-if="dataList.length != 0" v-for="(item,index) in dataList" :key="index">
					<!-- 头像 -->
					<view class="avatarBox">
						<image class="userImage" :src="IMG_URL + item.link" mode="aspectFill"></image>
					</view>
					<!-- 信息 -->
					<view class="userData">
						<view style="font-size: 40rpx;">{{item.gamerName}}</view>
						<view style="font-size: 25rpx;">时长剩余: {{item.totalTime}}小时</view>
						<view style="font-size: 25rpx;">金额: {{item.totalFee}}币</view>
						<view class="bt-dd">
							<!-- <view>
								<button size="mini" style="width: 180rpx;height: 65rpx; font-size: 25rpx;line-height: 65rpx; justify-content: right;" @click="reNowGetMoney(item)">去付款</button>
							</view> -->
							<view>
								<button v-if="flag === 1 || flag === 2  " size="mini" style="width: 180rpx;height: 65rpx; font-size: 25rpx;line-height: 65rpx; justify-content: right;" @click="showStatus(item)">去付款</button>
							</view>
							<view>
								<button v-if="flag === 3 " style="width: 170rpx;height: 65rpx; font-size: 25rpx;line-height: 65rpx;margin-right: 20rpx;" @click="getgammer(item)">查看订单</button>
							</view>
						</view>
					</view>
				</view>
				<!-- 无订单数据页面布局 -->
					<view v-if="dataList.length == 0" class="no-order" :style="'height:'+clentHeight+'px;'">
						<view class="no-order-text">
							您还没有相关订单
						</view>
						<u-button type="primary" @click="getToUni">去首页逛逛</u-button>
					</view>
			</view>
		<!-- 待到达 -->
		<view class="eveyrOrder" v-show="index == 4">
			<!-- 数据存在的情况 -->
			<view class="orderMsg" v-if="dataList.length != 0" v-for="(item,index) in dataList" :key="index">
				<!-- 头像 -->
				<view class="avatarBox">
					<image class="userImage" :src="IMG_URL + item.link" mode="aspectFill"></image>
				</view>
				<!-- 信息 -->
				<view class="userData">
					<view style="font-size: 40rpx;">{{item.gamerName}}</view>
					<view style="font-size: 25rpx;">时长剩余: {{item.totalTime}}小时</view>
					<view style="font-size: 25rpx;">金额: {{item.totalFee}}币</view>
					<view class="bt-dd">
						<view>
							<button style="width: 170rpx;height: 65rpx; font-size: 25rpx;line-height: 65rpx;margin-right: 20rpx;" @click="getgammer(item)">订单查看</button>
						</view>
					</view>
				</view>
			</view>
			<!-- 无订单数据页面布局 -->
			<view v-if="dataList.length == 0" class="no-order" :style="'height:'+clentHeight+'px;'">
				<view class="no-order-text">
					您还没有相关订单
				</view>
				<u-button type="primary" @click="getToUni">去首页逛逛</u-button>
			</view>
		</view>
		<!-- 售后 -->
		<view class="eveyrOrder" v-show="index == 5">
			<!-- 数据存在的情况 -->
			<view class="orderMsg" v-if="dataList.length != 0" v-for="(item,index) in dataList" :key="index">
				<!-- 头像 -->
				<view class="avatarBox">
					<image class="userImage" :src=" IMG_URL + item.link" mode="aspectFill"></image>
				</view>
				<!-- 信息 -->
				<view class="userData">
					<view style="font-size: 40rpx;">{{item.gamerName}}</view>
					<view style="font-size: 25rpx;">时长剩余: {{item.totalTime}}小时</view>
					<view style="font-size: 25rpx;">金额: {{item.totalFee}}币</view>
					<view class="bt-dd">
						<view>
							<button style="width: 170rpx;height: 65rpx; font-size: 25rpx;line-height: 65rpx;margin-right: 20rpx;">订单处理</button>
						</view>
					</view>
				</view>
			</view>
			<!-- 无订单数据页面布局 -->
				<view v-if="dataList.length == 0" class="no-order" :style="'height:'+clentHeight+'px;'">
					<view class="no-order-text">
						您还没有相关订单
					</view>
					<u-button type="primary" @click="getToUni">去首页逛逛</u-button>
				</view>
		</view>
		<!-- 弹出层警示 -->
		<u-modal v-model="isShow" :content="content" @confirm="confirm" :show-cancel-button="true"></u-modal>
		<u-toast ref="uToast" position="center" />
	</view>
</template>

<script>
	import {getOrderData, getOrderList,delOrder} from "../../api/order.js"
	import {IMG_URL} from "../../config/URL";
  import {reOrder} from "../../api/order.js"
	export default {
		// 下拉刷新
		onPullDownRefresh(){
			this.OrderList(this.data)
			uni.stopPullDownRefresh()
		},
		async onLoad(options) {
			let data = options
			await this.OrderList(this.data)
			this.flag = uni.getStorageSync('userInfo').flag
		},
		async onReady() { // 初步渲染完后执行
			uni.getSystemInfo({
				success: (res) => {
					// 可视区域高度 减去头部高度
					this.clentHeight = res.windowHeight - uni.upx2px(80) - this.getClientHeight();
				}
			})
			await this.OrderList(this.data)
		},

		data() {
			return {
        IMG_URL,
				content:"",
				// 身份 1用户 2互娱
				flag:0,
				loadmore:false,
				status:"",
				isShow:false,
				// 导航栏位置
				index:4,
				clentHeight:0,
				// 订单信息
				dataList:{},
				// 订单获取
				data:{
					"sift": 0,
					"size": 10,
				},
				// 获取长度
				len:0,
			}
		},
		// 数据监听
		watch:{
			index:{
				// 监听导航条切换
				handler(newNum,oldNum){
					if(newNum == 0){
						this.data = {
							"sift": 0,
							"size": 10,
						},
						this.OrderList(this.data)
						return
					}
					this.data.tag = newNum
					this.OrderList(this.data)
				},
				immediate:true,
				Userorder:{},
				itemid:0,
			}
		},
		methods: {
			// 删除提示框状态
			delOrderStatus(itemId){
				this.content = "确认删除"
				this.isShow = true
				this.itemid = itemId
			},
			// 去付款提示框状态
			showStatus(item){
				this.content = "确认下单"
				this.isShow = true
				this.Userorder = item
			},
			// 提示框提交
			confirm() {
				if(this.content === "确认删除"){
					this.delOrder(this.itemid)
					this.isShow = false
				}
				if(this.content === "确认下单"){
					this.reNowGetMoney(this.Userorder)
					this.isShow = false
				}
			},
			// 删除订单
			async delOrder(item){
			 	const res = await delOrder(item)
				if(this.data.code != 500) {
					this.$refs.uToast.show({
						title:res.data.data,
						type:"success"
					})
				};
				this.OrderList(this.data)
			},
			// 拉到底部触发操作
			async onReachBottom() {
				this.status = 'loading';
				this.data.size += 5
				const res =  await this.OrderList(this.data)
				this.status = 'nomore'
			},
			// 待付款重新支付
			async reNowGetMoney(row){
				let data = {
					id:row.id
				}
				const res = await reOrder(data)
				if(res.data.code === 200){
					this.$refs.uToast.show({
						title: '下单成功',
						type: 'success',
					})
					this.OrderList(this.data)
				}else{
					this.$refs.uToast.show({
						title:res.data.msg,
						type:"error"
					})
				}
			},
			async OrderList(data){
				uni.showLoading({
					title: '加载中',
				})
				// 订单数据
				const userflag = uni.getStorageSync('userInfo')
				if(userflag.flag==3){
					this.data.sift = 2
				}else if(userflag.flag==1){
					this.data.sift = userflag.flag
				}else (
					this.data.sift =1
				)
				const res = await getOrderList(data);
				this.dataList = res.data.data
				uni.hideLoading()
			},
			getgammer(item){

				const userflag = uni.getStorageSync('userInfo')
				let data = {
					"index":this.index,
					"mtag": "",
					"orderNo": item.orderNo,
					"tag": "",
					"sift": userflag.flag
				}
				// 用户
				if(userflag.flag === 1){
					data.tag = 3
				}
				// 互娱师
				if(userflag.flag === 3){
					data.mtag = 3
				}
				// 商家
				if(userflag.flag === 2) {
					data.tag = 3
				};
				uni.navigateTo({
				  // 参数传递
				  url:"/subPages/subOrders/orderDetailMap/index?data="+encodeURIComponent(JSON.stringify(data))
				})
			},
			getToUni(){
				uni.switchTab({
					url:"/pages/Home/Home"
				})
			},
			// 获取可视区域高度【兼容】
			getClientHeight(){
				const res = uni.getSystemInfoSync();
				const system = res.platform;
				if ( system === 'ios') {
					return 44 + res.statusBarHeight;
				}else if( system === 'android' ){
					return 48 + res.statusBarHeight;
				} else{
					return 0;
				}
			},
		}
	}
</script>

<style>
	.no-order{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
	.msgUrl{
		height: 90vh;
		width: 100%;
		background-color: #5BA7FF;
	}
	.bt-dd{
		margin-top: 10rpx;
		display: flex;
		width: 100%;
	}
	.userData{
		margin-left: 20rpx;
		width: 60%;
		height: 200rpx;
	}
	.userImage{
		border-radius: 20rpx;
		width: 100%;
		height: 200rpx;
	}
	.avatarBox{
		border-radius: 20rpx;
		width: 30%;
		height: 200rpx;
		background-color: #5BA7FF;
	}
	.orderMsg{
		background-color: #FFFFFF;
		border-radius: 20rpx;
		width: 100%;
		margin-top: 20rpx;
		display: flex;
		height: 200rpx;
	}
	.eveyrOrder{
		margin: 30rpx;
		margin-bottom: 200rpx;
	}
.inv-h-w{
	background-color: #FFFFFF;
	height: 80upx;
	display: flex;
	}
.inv-h{
	font-size: 30upx;
	flex: 1;
	text-align: center;
	color: #C9C9C9;
	height: 80upx;
	line-height: 80upx;
	}
.inv-h-se{
	color: #5BA7FF;
	border-bottom: 4upx solid #5BA7FF;
	}
page{
	background-color: #F2F2F2;
	}
</style>
